<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Top View参数设置页面</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>
    <form class="layui-form" action="">
        <div class="layui-form" lay-filter="">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>曲线信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">模板类型：</label>
                <div class="layui-input-inline" style="width:160px">
                    <input type="text" name="Modeltype" autocomplete="off" value="测斜" readonly class="layui-input">
                </div>
                <label class="layui-form-label">曲线名称：</label>
                <div class="layui-input-inline" style="width:160px">
                    <select id="ident" name="ident" class="from-control" lay-filter="ident"></select>
                </div>
                <div>
                    <input type="text" id="hd1" hidden value="">
                    <input type="text" id="hd2" hidden value="">
                    <input type="text" id="hd3" hidden value="">
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>实际数据</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">曲线类型：</label>
                <div class="layui-input-inline" style="width:160px">
                    <select id="linetype1" class="layui-select" lay-search>
                        <option value="0">实线</option>
                        <option value="1">虚线</option>
                        <option value="2">点线</option>
                        <option value="3">实线(粗)</option>
                        <option value="4">虚线(粗)</option>
                        <option value="5">点线(粗)</option>
                    </select>
                </div>
                <label class="layui-form-label">曲线颜色：</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" placeholder="请选择颜色" autocomplete="off" readonly class="layui-input"
                        id="lineset-input1">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test1"></div>
                </div>
                <div class="layui-input-block">
                    <input type="checkbox" id="realdatashow" lay-skin="primary" title="显示">
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>设计数据</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">曲线类型：</label>
                <div class="layui-input-inline" style="width:160px">
                    <select id="linetype2" class="layui-select" lay-search>
                        <option value="0">实线</option>
                        <option value="1">虚线</option>
                        <option value="2">点线</option>
                        <option value="3">实线(粗)</option>
                        <option value="4">虚线(粗)</option>
                        <option value="5">点线(粗)</option>
                    </select>
                </div>
                <label class="layui-form-label">曲线颜色：</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" placeholder="请选择颜色" readonly autocomplete="off" class="layui-input"
                        id="lineset-input2">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test2"></div>
                </div>
                <div class="layui-input-block">
                    <input type="checkbox" id="designdatashow" lay-skin="primary" title="显示">
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>背景颜色</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">背景颜色：</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" value="" readonly placeholder="请选择颜色" autocomplete="off" class="layui-input"
                        id="lineset-input3">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test3"></div>
                </div>
            </div>
        </div>

    </form>
    <script type="text/javascript" src="../../jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../layui/public.js"></script>
    <script type="text/javascript" src="../../index.js"></script>
    <script type="text/javascript">
        var $;
        var form;
        var list;
        var colorpicker;
        layui.use(['form', 'colorpicker'], function () {
            $ = layui.$;
            form = layui.form;
            colorpicker = layui.colorpicker;

            //身份验证
            if (getoken != false) {
                //获取曲线信息
                $.ajax({
                    type: "get",
                    url: api_address + '/curve/getcur',
                    async: false,
                    headers: {
                        Authorization: getoken
                    },
                    contentType: 'application/json;',
                    success: function (res) {
                        if (res.code == 200) {
                            list = res.data;
                            for (var i = 0; i < list.length; i++) {
                                if (list[i].curveType == 3) {
                                    var option = "<option value=\"" + list[i].curveName + "\"";
                                    option += ">" + list[i].curveName + "</option>"; //动态添加数据
                                    $("select[name=ident]").append(option);
                                }
                            }
                            form.render();
                        }
                    }
                });

                //实际数据颜色
                colorpicker.render({
                    elem: '#test1'
                    , color: '#f90c0c'
                    , done: function (color) {
                        $('#lineset-input1').val(color);
                    }
                });

                //设计数据颜色
                colorpicker.render({
                    elem: '#test2'
                    , color: '#ddbdbd'
                    , done: function (color) {
                        $('#lineset-input2').val(color);
                    }
                });

                //背景颜色赋值
                colorpicker.render({
                    elem: '#test3'
                    , color: '#ffffff'
                    , done: function (color) {
                        $('#lineset-input3').val(color);
                    }
                });

                //曲线名称的监听事件
                form.on('select(ident)', function (data) {
                    var vs = $("#ident option:checked").val();
                    for (var i = 0; i < list.length; i++) {
                        if (vs == list[i].curveName) {
                            $("#hd1").val(list[i].tableName);
                            $("#hd2").val(list[i].params);
                            $("#hd3").val(list[i].curveName);
                        }
                    }
                })
            }
        });

        //曲线数据返填
        function CurveData(data) {
            $('#linetype1').val(data.selecttype);
            $('#lineset-input1').val(data.linecolor);
            $('#ident').val(data.curvename);
            $("#hd1").val(data.tablename1);
            $("#hd2").val(data.parameter1);
            $("#hd3").val(data.curvename);
            if (data.linedatashow == true) {
                $('#realdatashow').prop("checked", true);
            } else {
                $('#realdatashow').prop("checked", false);
            }
            $('#linetype2').val(data.selecttype_design);
            $('#lineset-input2').val(data.linecolor_design);

            if (data.linedatashow_design == true) {
                $('#designdatashow').prop("checked", true);
            } else {
                $('#designdatashow').prop("checked", false);
            }
            $('#lineset-input3').val(data.canvasbc);

            //实际数据颜色
            colorpicker.render({
                elem: '#test1'
                , color: data.linecolor
                , done: function (color) {
                    $('#lineset-input1').val(color);
                }
            });
            //设计数据颜色
            colorpicker.render({
                elem: '#test2'
                , color: data.linecolor_design
                , done: function (color) {
                    $('#lineset-input2').val(color);
                }
            });
            //背景颜色赋值
            colorpicker.render({
                elem: '#test3'
                , color: data.canvasbc
                , done: function (color) {
                    $('#lineset-input3').val(color);
                }
            });

            form.render();
        }
    </script>

</body>

</html>